<template>
	<view class="user-info">
		<NavbarCustom leftIconColor="#333333" bgColor="transparent" isBack
			:left="{imageUrl:leftImageUrl,width:'48rpx'}" />
		<view class="background">

		</view>

		<view class="content">
			<view class="head">
				<view class="title-view">建立孩子学习档案</view>
				<view class="text-view">获得个性化教材推荐并保存学习进度</view>
			</view>
			<view class="label-view">
				宝贝年龄
			</view>
			<view class="value-view age" @click="openAgeSelect">
				<text class="">
					<text>{{form.age}}</text>
					<text>岁</text>
				</text>
				<image :src="selectRightIcon" mode="" class="select-right-icon"></image>
			</view>
			<view class="label-view">
				宝贝性别
			</view>
			<view class="value-view gender">
				<view class="gender-item"
					:style="{'border-color':form.gender===item.value?item.color:'',color:form.gender===item.value?item.color:''}"
					v-for="(item,index) in genderList" :key="index" @click="genderChange(item)">
					<image :src="form.gender===item.value?item.selectIcon:item.icon" mode="" class="gender-icon">
					</image>
					<text>{{item.label}}</text>
				</view>
			</view>
			<view class="label-view">
				喜欢朗诵的作品风格
			</view>
			<view class="value-view recitation">
				<view class="recitation-item" :class="{'recitation-active':item.selected}" v-for="(item,index) in recitationList"
					:key="index" @click="recitationChange(item)">
					<text>{{item.label}}</text>
				</view>
			</view>
			<SubmitButton text="确认" :disabled="disabled" @handleClick="handleClick"></SubmitButton>
		</view>
		<up-datetime-picker
		            :show="ageSelectShow"
		            v-model="birthday"
		            mode="date"
					format="YYYY-MM-DD"
					closeOnClickOverlay
					:minDate="minDate"
					:maxDate="maxDate"
					@confirm="ageChange" @close="ageSelectClose"
					@cancel="ageSelectCancel"
		        ></up-datetime-picker>
	<!-- 	<up-picker ref="agePickerRef" :show="ageSelectShow" closeOnClickOverlay :defaultIndex="defaultIndex"
			:columns="ageColumns" @confirm="ageChange" @close="ageSelectClose"></up-picker> -->
	</view>
</template>

<script setup>
	import NavbarCustom from "@/components/navbar-custom/index.vue"
	import SubmitButton from "@/components/submit-button/index.vue"
	import {
		ref,
		reactive,
		computed,
		onMounted,
		nextTick
	} from "vue"
	import {
		onLoad,
		onReady
	} from "@dcloudio/uni-app"
	import useUserStore from "@/store/user.js"
	import {
		storeToRefs
	} from "pinia"
	const userStore = useUserStore()
	const {
		userInfo
	} = storeToRefs(userStore); // 响应式
	import {
		genderOptions,
		recitationOptions
	} from "@/utils/options/login/index.js"
	import {
		showToast,
		parseTime,
		getAge
	} from "@/utils/common.js"
	import {
		update
	} from "@/api/user/index.js";
	const leftImageUrl = ref("/static/images/login/loginfanhui@3x.png")
	const selectRightIcon = ref("/static/images/login/login-gengduo@3x.png")
	const genderList = ref(genderOptions)
	const form = reactive({
		age: 0,
		birthday:userInfo.value&&userInfo.value.birthday||parseTime(new Date(),"{y}-{m}-{d}"),
		gender: '1',
		recitation: []
	})
	form.age=getAge(form.birthday)
	const disabled = computed(() => {
		return !form.birthday || !form.gender || form.recitation.length === 0
	})
	const ageSelectShow = ref(false)
	const minDate=ref(new Date("1950/01/01 00:00:00").getTime())
	const maxDate=ref(new Date().getTime())
	const birthday = ref(parseTime(form.birthday,"{y}-{m}-{d}"))
	const openAgeSelect = () => {
		nextTick(() => {
			ageSelectShow.value = true
		})
	}
	const ageSelectCancel=()=>{
		ageSelectClose()
	}
	const ageSelectClose = () => {
		ageSelectShow.value = false
	}
	
	const ageChange = (e) => {
		let today=new Date().getTime()
		form.age=getAge(e.value)
		form.birthday = parseTime(e.value,"{y}-{m}-{d}")
		ageSelectClose()
	};
	const genderChange = (item) => {
		console.log(form);
		form.gender = item.value
		console.log(form);
	}
	const recitationList = ref(recitationOptions)
	const recitationChange = (item) => {
		item.selected = !item.selected
		let selected = []
		recitationList.value.map(item => {
			if (item.selected) {
				selected.push(item.label)
			}
		})
		form.recitation = selected
	}

	const validate = () => {
		let title = null
		if (!form.age) {
			title = "请选择年龄"
		} else if (!form.gender) {
			title = "请选择性别"
		} else if (form.recitation.length === 0) {
			title = "请选择作品风格"
		}
		if (title) {
			showToast(title)
			return false
		}
		return true
	}
	const handleClick = async() => {
		if (!validate()) {
			return false
		}
		console.log("submit");
		let params={
			birthday:form.birthday,
			gender:form.gender,
			recitation:form.recitation.join(","),
		}
		try{
			let res=await update(params)
			if(res.code==0){
				await userStore.getUserInfo()
				uni.switchTab({
					url: "/pages/index/index"
				})
			}
		}catch(e){
			console.log(e);
			//TODO handle the exception
		}
	
	}
</script>

<style lang="scss" scoped>
	.user-info {
		position: relative;
		min-height: 100vh;
		background: #FFFFFF;

		.background {
			width: 100%;
			height: 780rpx;
			top: 0;
			left: 0;
			position: absolute;
			background: linear-gradient(180deg, #90e4ed 0%, #FFFFFF 100%);
		}

		.content {
			position: relative;
			z-index: 10;
			padding: 60rpx 40rpx;
			padding-bottom: 128rpx;

			.head {
				margin-top: 28rpx;
				text-align: center;

				.title-view {
					font-size: 52rpx;
					line-height: 52rpx;
					color: #333333;
					font-weight: bold;
					margin-bottom: 24rpx;
				}

				.text-view {
					font-size: 38rpx;
					margin-top: 28rpx;
					color: #626666;
					margin-bottom: 115rpx;
				}
			}

			.label-view {
				display: flex;
				align-items: center;
				margin-bottom: 28rpx;

				.label-icon {
					width: 38rpx;
					height: 38rpx;
					margin-right: 8rpx;
				}

				.label-text {
					font-size: 28rpx;
					color: #626666;
					line-height: 28px;
				}
			}

			.value-view {
				margin-bottom: 50rpx;
			}

			.age {
				height: 88rpx;
				background: #F4F5F7;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 36rpx;
				font-size: 28rpx;
				color: #1A1A1A;
				line-height: 28rpx;

				.select-right-icon {
					width: 14rpx;
					height: 22rpx;
				}
			}

			.gender {
				display: flex;
				align-items: center;

				.gender-item {
					width: 308rpx;
					height: 88rpx;
					background: #F4F5F7;
					border-radius: 44rpx;
					border: 2rpx solid #F4F5F7;
					display: flex;
					align-items: center;
					padding: 0 30rpx;
					font-size: 28rpx;
					color: #626666;
					line-height: 28rpx;
					margin-right: 30rpx;

					&:last-child {
						margin-right: 0;
					}

					.gender-icon {
						width: 68rpx;
						height: 68rpx;
						margin-right: 30rpx;
					}
				}

			}

			.recitation {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
			}

			.recitation-item {
				margin: 0 10rpx;
				margin-bottom: 20rpx;
				width: 203rpx;
				height: 78rpx;
				background: #F4F5F7;
				border-radius: 20rpx;
				line-height: 78rpx;
				text-align: center;
				font-size: 28rpx;
				color: #626666;
			}

			.recitation-active {
				background: linear-gradient(315deg, #43D9F0 0%, #5CE5D5 100%);
				color: #FFFFFF;
			}

		}
	}
</style>